﻿<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "抽奖专区");
%>
<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>



<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/swiper.jsp"%>

<style>
/* 整个页面设置 */
* {
	padding: 0;
	margin: 0;
}
.forbody{
	background-image: url('<c:url value='/images/we/activity/bg.png' />');
	background-size: 100% 100%;
	border: 1px solid #ffffff;
	
}
/* 转盘指针设定 */
.box {
	position: relative;
	max-width: 750px;
	margin: 0px auto;
	margin-top: 40px;
	
}
/* 转盘图片设定 */
.box .img01 {
	width: 100%;
}
/* 指针设定*/
.box .drawBtn {
	position: absolute;
	width: 10rem;
	height: auto;
	left: 50%;
	margin-left: -5rem;
}

#roll {
	height: 55px;
	overflow: hidden;
	text-align: center;
	
}
.weui-cell:before{
	border-top:0px;
}
</style>
<input type="hidden" id="actiId" value="${actiId}" />
<div class="forbody">
<div class="box">
	<img src="<c:url value='/images/we/choujiang/zhuanpan.png'/>" class="img01" alt=""> 
	<img
		src="<c:url value='/images/we/choujiang/zhizhen2.png'/>" class="drawBtn">
</div>

<div class="weui-cell" style="margin: 40px 0px;border-radius:0.7rem;background: rgba(191, 191, 191, 0.2);">
	<div class="weui-cell__hd"></div>
	<div class="weui-cell__bd" id="roll">
		<c:forEach items="${actiRewards}" var="actiRewards">
			<div style="margin-top: 8px">
				<span style="color: #333333">恭喜用户 </span>
				<strong style="color: black">${actiRewards.userName}</strong>
				<span style="color: #333333; margin-left: 5px; margin-right: 5px;">抽中</span>
				<span style="color: red">${actiRewards.reward}</span>
				 <span style="color: #333333">元红包奖励</span>
			</div>
		</c:forEach>
	</div>
</div>
</div>
<script>
	var id;
	window.onload = function() {
		$(".forbody").height( window.screen.availHeight);
		
		/*获取指针对象  */
		var obj = $(".drawBtn");
		
		/*
		 *$(this)取出当前对象并转换为jQuery对象
		 *取出指针对象的高度
		 * .height() 返回以像素计的匹配元素的高度
		 */
		var hei = $(".img01").height();
		var hei2 = obj.height();
		/*定位指针*/
		obj.css("top", (hei - hei2) / 2);
	}

	$(function() {
		$(".swiper-container").swiper({
			pagination : '.swiper-pagination',
			paginationClickable : true,
			autoplay : 4000
		});
		movedown();
	})

	function movedown() {
		var marginTop = 8;
		var stop = false;
		var interval = setInterval(function() {
			if (stop)
				return;
			$('#roll').children('div').first().animate({
				'margin-top' : marginTop--
			}, 8, function() {
				var $first = $(this);
				if (!$first.is(':animated')) {
					if ((-marginTop) > $first.height()) {
						$first.css({
							'margin-top' : 8
						}).appendTo($('#roll'));
						marginTop = 8;
					}
				}
			});
		}, 100);
		$('#roll > div').mouseover(function() {
			stop = true;
		}).mouseout(function() {
			stop = false;
		});
	}
</script>


<script>
	//share份额[数字没有默认],
	//speed速度[单位s,最小0.1s],
	//velocityCurve速度曲线[linear匀速，ease慢快慢，ease-in慢慢开始，ease-out慢慢结束，ease-in-out慢快慢等，用的是css3的速度曲线],可以不写，ease默认值；
	//callback回调函数
	//weeks几周[默认2周，可以不写]

	//几份和回调函数这两个参数是必填

	function callbackA(ind) {
		var actiId = $("#actiId").val();
		//输出转盘序号
		switch (ind) {
		case 1:
			window.location.href = $.getVirtualPath()
					+ "/wechat/acc/redEnvelope/redEnvelopeIndex?id=" + id;
			id = null;
			break;
		case 3:
			window.location.href = $.getVirtualPath()
					+ "/wechat/acc/redEnvelope/redEnvelopeIndex?id=" + id;
			id = null;
			break;
		case 6:
			window.location.href = $.getVirtualPath()
					+ "/wechat/acc/redEnvelope/redEnvelopeIndex?id=" + id;
			id = null;
			break;
		default:
			break;
		}
	};

	//
	var newdraw = new turntableDraw('.drawBtn', {
		//份额 8 份
		share : 6,
		//转动速度
		speed : "3s",
		//速度曲线
		velocityCurve : "ease",
		//转动周数
		weeks : 20,
		//调用输出函数
		callback : function(num) {
			callbackA(num);
		},
	});

	//点击函数
	$(".drawBtn").click(
			function(event) {
				//ajax
				var actiId = $("#actiId").val();
				var url = $.getVirtualPath() + "/wechat/acti/toReward?actiId="
						+ actiId;
				var res = $.getJsonPost(url);
				id = res.id;
				var mathRewardUtil = res.mathRewardUtil;

				if (mathRewardUtil == "1" || mathRewardUtil == "3"
						|| mathRewardUtil == "6") {

					newdraw.runto(parseInt(mathRewardUtil));
				} else if (mathRewardUtil == "0") {
					alert("您已参与抽奖，请关注公众号推送消息");
					window.location.href = $.getVirtualPath()
							+ "/wechat/cust/personCenter/index";
				}

			});

	//转动函数
	function turntableDraw(obj, jsn) {
		/*
		严格模式（use strict）
		1.全局变量显式声明
		2.禁止this关键字指向全局对象
		3.禁止删除变量
		4.对象不能有重名的属性
		5.函数不能有重名的参数
		 */
		"use strict";

		this.draw = {};
		this.draw.obj = $(obj);
		this.draw.objClass = $(obj).attr("class");
		this.draw.newClass = "rotary" + "new" + parseInt(Math.random() * 1000);
		//获取每一份的角度
		var _jiaodu = parseInt(360 / jsn.share);
		//获取转动圈数，未设置则为4
		var _yuan = 360 * (jsn.weeks || 4);
		//
		var _str = "";
		//获取转动速度，未设置则为2S
		var _speed = jsn.speed || "2s";
		//获取速度曲线，未设置则为慢快慢
		var _velocityCurve = jsn.velocityCurve || "ease";
		//
		var _this = this;
		//转动时兼容不同浏览器
		for (var i = 1; i <= jsn.share; i++) {
			_str += "." + this.draw.newClass + i + "{";
			_str += "transform:rotate(" + ((i - 1) * _jiaodu + _yuan) + "deg);";
			_str += "-ms-transform:rotate(" + ((i - 1) * _jiaodu + _yuan)
					+ "deg);";
			_str += "-moz-transform:rotate(" + ((i - 1) * _jiaodu + _yuan)
					+ "deg);";
			_str += "-webkit-transform:rotate(" + ((i - 1) * _jiaodu + _yuan)
					+ "deg);";
			_str += "-o-transform:rotate(" + ((i - 1) * _jiaodu + _yuan)
					+ "deg);";
			_str += "transition: transform " + _speed + " " + _velocityCurve
					+ ";";
			_str += "-moz-transition: -moz-transform " + _speed + " "
					+ _velocityCurve + ";";
			_str += "-webkit-transition: -webkit-transform " + _speed + " "
					+ _velocityCurve + ";";
			_str += "-o-transition: -o-transform " + _speed + " "
					+ _velocityCurve + ";";
			_str += "}";
			_str += "." + this.draw.newClass + i + "stop{";
			_str += "transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
			_str += "-ms-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
			_str += "-moz-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
			_str += "-webkit-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
			_str += "-o-transform:rotate(" + ((i - 1) * _jiaodu) + "deg);";
			_str += "}";
			console
					.log("===========================================================");
			console.log(_str);
		}
		;

		//document.head 当前文档中的 <head> 元素。如果有多个 <head> 元素，则返回第一个，
		//是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出TypeError异常
		//append()被选元素的结尾（仍然在内部）插入指定内容
		$(document.head).append("<style>" + _str + "</style>");
		//将速度的单位去除*1000，得到转动速度
		_speed = _speed.replace(/s/, "") * 1000;

		// 默认指针不能转
		this.draw.startTurningOk = false;
		//指针指向
		this.draw.runto = function(ind) {

			if (_this.draw.startTurningOk) {
				return false
			}
			;
			/* /attr() 方法设置或返回被选元素的属性值 */
			_this.draw.obj.attr("class", _this.draw.objClass + " "
					+ _this.draw.newClass + ind);

			_this.draw.startTurningOk = true;

			setTimeout(function() {
				//调用回调函数，输出回调值
				_this.draw.obj.attr("class", _this.draw.objClass + " "
						+ _this.draw.newClass + ind + "stop");

				if (jsn.callback) {
					//默认值设回false
					_this.draw.startTurningOk = false;
					//调用回调函数，输出回调值
					jsn.callback(ind);
				}
				;
			}, _speed + 10);
			return _this.draw;
		};
		return this.draw;
	};
</script>



